<!DOCTYPE html>
<html ang="en">
<head>
    <meta charset="UTF-8">
    <title>welcome to pactera</title>
    <script type="text/javascript" src="common/common.js"></script>
    <style>
        .my-table {
            margin-top: 30px;
            border-collapse: collapse;
            width: 30%;
            min-width: 375px;
            font-size: 14px;
        }
        .my-table tr td{
            border: 1px dashed rgba(0, 0, 0, 0.3);
        }
        .my-table td{
            padding: 5px 10px;
        }
        .my-table td:nth-child(1){
            font-weight: bold;
            width: 110px;
        }
        .title{
            padding: 20px 0px;
            font-size:16px;
            font-weight: 600;
        }
        .my-form .el-form-item__label{
            text-align: left;
            font-weight: bold;
        }
        .my-textarea{
            margin: 0px;
            width: 350px;
            min-height: 310px;
            border: 1px dashed rgba(0, 0, 0, 0.3);
            font-size: 14px;
            font-weight: bold;
        }
    </style>
</head>
<body >
<div id="appId">
    <el-container style="height: 500px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-active="activeMenu" index="2">
                <el-submenu v-for="(item,index) in menuList" :key="index" :index="item.code">
                    <template slot="title"><i class="el-icon-menu"></i>{{item.name}}</template>
                    <el-menu-item-group v-show="item.child">
                        <el-menu-item   v-for="(obj,i) in item.child"  :key="i" :index="obj.code" @click="handleMenu(obj)">{{obj.name}}</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container v-if="isShowWeather">
            <el-main>
                <el-form ref="form"  class="my-form" label-width="90px">
                    <el-form-item label="City Name">
                        <el-select v-model="city" placeholder="Pls select" filterable>
                            <el-option v-for="(item,index) in cities" :key="index" :label="item.cityCode" :value="item.cityName" @click.native="change(item)"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form >
            <table class="my-table">
                <tbody>
                <tr>
                    <td>City</td>
                    <td>{{city}}</td>
                </tr>
                <tr>
                    <td>Updated Time</td>
                    <td>{{updateTime}}</td>
                </tr>
                <tr>
                    <td>Weather</td>
                    <td>{{weatherInfo.text}}</td>
                </tr>
                <tr>
                    <td>Temperature</td>
                    <td>{{weatherInfo.temp | tempFilter}} </td>
                </tr>
                <tr>
                    <td>Wind</td>
                    <td>{{weatherInfo.windSpeed | windFilter}}</td>
                </tr>
                </tbody>
            </table>
            </el-main>
        </el-container>
        <el-container v-if="isShowPets">
            <el-main>
                <textarea id="jsonTextarea" readonly class="my-textarea"> {{pets}}</textarea>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#appId',
        data: {
            menuList: [
                {
                    name:'Weather',code:'1',url:"",
                    child:[{name:'Weather Info',code:'1-1',url:'isShowWeather'}]
                },
                {
                    name:'Pets',code:'2',url:"",
                    child:[{name:'Pets Json',code:'2-1',url:"isShowPets"}]
                }
            ],
            isShowWeather:true,
            isShowPets:false,
            activeMenu:"1-1",
            city: 'Sydney',
            cities:[],
            weatherInfo:{},
            defaultCityName:'悉尼',
            pets:[],
            cityInfo:[],
            updateTime: ''
        },
        mounted () {
            this.queryCity(this.defaultCityName);
            this.queryPets();
            this.loadDefaultCities();
        },
        methods: {
            loadDefaultCities () {
                const fullUrl = 'http://' + document.location.host + '/city/defaultCities';
                axios.get(fullUrl).then(res=>{
                    this.cities = res.data.data
            })
            },
            queryWeather (cityCode) {
                const fullUrl = 'http://' + document.location.host + '/city/cityWeather?cityId=' + cityCode;
                axios.get(fullUrl).then(res=>{
                    this.updateTime = res.data.data.updateTime
                    this.weatherInfo = res.data.data.now
                })
            },
            queryPets() {
                const fullUrl = 'http://' + document.location.host + '/pets/petList';
                axios.get(fullUrl).then(res=>{
                    let str = res.data.data ? res.data.data:{}
                    this.pets = this.parse(JSON.stringify(str))
                })
            },
            queryCity (cityName) {
                this.cityInfo = []
                const fullUrl = 'http://' + document.location.host + '/city/cityInfo?cityName=' + cityName;
                axios.get(fullUrl).then(res=>{
                    this.cityInfo = res.data.data.location
                    var cityId = '';
                    for(var i = 0; i<this.cityInfo.length;i++) {
                        if(this.cityInfo[i]['name'] === cityName) {
                            cityId = this.cityInfo[i]['id']
                            this.queryWeather(cityId);
                            break;
                        }
                    }
                })
            },
            handleMenu (val){
                if(val.url === 'isShowWeather') {
                    this.isShowWeather = true;
                    this.isShowPets = false;
                }else if(val.url ==='isShowPets') {
                    this.isShowWeather = false;
                    this.isShowPets = true;
                }
            },
            change (item) {
                this.city = item.cityCode
                this.queryCity(item.cityName);
            },
            //转json格式
            parse(str) {
                return JSON.stringify(JSON.parse(str), null, "\t");
            }
    }
    })

    Vue.filter('tempFilter', function (value) {
        if (!value) return ''
        return value + "℃"
    })

    Vue.filter('windFilter', function (value) {
        if (!value) return ''
        return value + "km/h"
    })

</script>

</html>